<!-- 标签页布局 -->
<template>
	<div class='navigation-assembly-box'>
		<div class="tabs-box">
			<el-tabs @tab-click="handleClick">
				<el-tab-pane label="博文" name="Bowen">博文</el-tab-pane>
				<el-tab-pane name="chat">
					<div slot="label">

						<el-badge :value="unreadQuantity.chatQuantity" v-show="unreadQuantity.chatQuantity!==0" class="new-message-reminder">
							<span></span>
						</el-badge>
						<span>聊天</span>


					</div>
				</el-tab-pane>
				<el-tab-pane name="leavingAMessage">
					<div slot="label">
						<el-badge :value="unreadQuantity.leavingAMessageQuantity" v-show="unreadQuantity.leavingAMessageQuantity!==0"  class="new-message-reminder">
							<span></span>
						</el-badge>
						<span>留言</span>
					</div>
				</el-tab-pane>

			</el-tabs>
		</div>
	</div>

</template>

<script>
	import {
		devUserManagementUrl
	} from '@/api/apiconst'
	import {
		devChatManagementUrl
	} from '@/api/apiconst'
	import jwtDecode from 'jwt-decode';
	import {
		devMessageBoardManagementUrl
	} from '@/api/apiconst'
	export default {
		name: 'NavigationAssembly',
		data() {
			return {
				//未读消息数量
				unreadQuantity: {
					//聊天未读消息数量
					chatQuantity: 0,
					//留言未读消息数量
					leavingAMessageQuantity: 0
				},
				activeName: '',
				oldClickName: "",
				showChatNewMessageReminder: localStorage.getItem("chatMessageStr") != null && localStorage.getItem(
					"chatMessageStr") != '',
				showMessageNewMessageReminder: (localStorage.getItem("privateLetterStr") != null && localStorage.getItem(
					"privateLetterStr") != '') || (localStorage.getItem("systemMessageStr") != null && localStorage
					.getItem("systemMessageStr") != ''),
			};
		},
		/**
		 * 监听发送过来的聊天消息
		 */
		watch: {
			
			'$store.state.chatMessageStr'(newVal, oldVal) {
				//有新的聊天消息就将数量加一
				this.unreadQuantity.chatQuantity++;
			},
			'$store.state.leavingAMessage':{
				handler(newVal, oldVal) {
					this.unreadQuantity.leavingAMessageQuantity++;
					//有新的聊天消息就将数量加一
					console.log("新的留言",newVal)
					console.log("新的留言1",newVal.privateLetterStr)
					console.log("新的留言2",newVal.systemMessageStr)
					console.log("解析后的新的留言",JSON.parse(newVal.privateLetterStr))
				},
				deep:true
			}
		},
	
		mounted() {
			//加载未读消息数量
			this.loadNumberOfUnreadMessages();
		},
		methods: {
			handleClick(tab, event) {
				console.log("开始校验token--")
				//验证当前cookie是否过期
				this.$axios({
					method: 'GET',
					url: '/user/check',
					baseURL: devUserManagementUrl,
				}).then(
					response => { //此处接收响应回来的数据
						if (response.data.code == 200) {
							//判断防止重复点击
							if (tab.name === this.oldClickName) {
								console.log("重复了")
								return;
								//判断用户是否登录	
							} else {
								console.log("可以走", this.isLogin)
								this.oldClickName = tab.name;
								//判断是否为博文
								if ("Bowen" === tab.name) {
									//跳转到博客界面
									this.$router.push({
										path: "/blogList"
									});
								} else if ("chat" === tab.name) {
									//跳转到聊天界面
									this.$router.push({
										path: "/chat"
									});
								} else if ("leavingAMessage" === tab.name) {
									//跳转到留言界面
									this.$router.push({
										path: "/messageBoard"
									});
								}
							}
						}
					});

			},
			/**
			 * 加载未读消息数量
			 */
			loadNumberOfUnreadMessages() {

				//加载聊天未读消息数量
				this.$axios({
					url: '/chatRelated/queryChatUnreadQuantity/' + jwtDecode(localStorage.getItem("token")).ID,
					baseURL: devChatManagementUrl,
					method: 'get',
				}).then(

					response => {
						if (response.data.code == 200) {
							const result = response.data.data;
						
							this.unreadQuantity.chatQuantity = result.unread_quantity;
						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);
				
				
				//加载留言未读消息数量
				this.$axios({
					method: 'GET',
					url: '/messageBoard/queryUnreadQuantity/'+jwtDecode(localStorage.getItem("token")).ID,
					baseURL: devMessageBoardManagementUrl,
				}).then(
					response => {
						if (response.data.code == 200) {
							const result = response.data.data;
							const _this=this;
							result.forEach(function(item, index) {
								_this.unreadQuantity.leavingAMessageQuantity+=item.unread_quantity;
							});
							console.log("留言消息-->>",result)						
							
						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);
			}

		}
	}
</script>

<style>
	.new-message-reminder {
		width: 13px;
		height: 13px;
		color: #fff;
		float: right;
		margin-right: -3px;
		margin-top: 12px;
	}

	/* 标签初始化样式 */
	.navigation-assembly-box .tabs-box .el-tabs__item {
		color: white;
		font-size: 17px;

		margin-right: 0px;
	}

	/* 标签点击后样式 */
	.navigation-assembly-box .tabs-box .el-tabs__item.is-active {
		color: #909399;
	}

	.navigation-assembly-box .tabs-box .el-tabs__nav {
		float: right;
		margin-right: 60px;
	}

	.navigation-assembly-box .tabs-box .el-tabs__nav-wrap::after {
		display: none;
	}

	.navigation-assembly-box .tabs-box .el-tabs__active-bar {
		display: none;
	}

	.navigation-assembly-box .tabs-box .el-tabs__nav-scroll {
		opacity: 0.5;
		background-color: rgba(0, 0, 0, 0.5);
		width: 80%;
		border-bottom-right-radius: 30px;
		border-bottom-left-radius: 30px;
		margin-left: 13%;
	}

	.navigation-assembly-box .tabs-box .el-tabs__content {
		display: none;
	}
</style>
